<template>
  <ElCard :style="{ 'margin-top': props.marginTop }">
    <template #header>
      <div class="card-header">
        <div class="left">
          <div class="icon">&nbsp;</div>
          <div class="title">解说碑</div>
        </div>
        <div class="right">
          <ElButton type="primary" @click="onAddClicked">新增</ElButton>
        </div>
      </div>
    </template>
    <div class="table-box">
      <ProTable
        ref="proTableRef"
        :toolButton="false"
        row-key="id"
        title="列表"
        :columns="columns"
        :request-api="loadTable"
        :showEmptyIcon="false"
        highlight-current-row>
        <template #operation="scope">
          <ElButton type="warning" link :icon="EditPen" @click="onEditClicked(scope.row)">编辑</ElButton>
          <ElButton type="danger" link :icon="Delete" @click="onDeleteClicked(scope.row)">删除</ElButton>
        </template>
      </ProTable>
    </div>
    <ElDrawer v-model="opened" :title="formType" size="40%" destroy-on-close>
      <ElSkeleton v-if="loading" animated :rows="10" />
      <ElForm v-else :model="form" :rules="rules" ref="formRef" status-icon>
        <ElFormItem label="名称" :label-width="labelWidth" prop="name">
          <ElInput v-model="form.name" />
        </ElFormItem>
        <ElFormItem label="经度" :label-width="labelWidth" prop="longitude">
          <ElInput v-model="form.longitude" />
        </ElFormItem>
        <ElFormItem label="纬度" :label-width="labelWidth" prop="latitude">
          <ElInput v-model="form.latitude" />
        </ElFormItem>
      </ElForm>
      <template #footer>
        <ElButton type="primary" @click="onSaveClicked">保存</ElButton>
        <ElButton @click="onCancelClicked">取消</ElButton>
      </template>
    </ElDrawer>
  </ElCard>
</template>

<script setup lang="ts">
import { ref, reactive, computed, unref } from 'vue'
import { Delete, EditPen } from '@element-plus/icons-vue'
import { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import ProTable from '@/components/ProTable/index.vue'
import {
  EducationStele,
  pageEducationStele,
  removeEducationStele,
  getEducationSteleDetail,
  saveOrUpdateEducationStele
} from '@api/tby/education/educationStele'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ElForm, ElFormItem, FormRules, FormInstance } from 'element-plus'
import { FormType } from '@/enums'
import { validateLatitude, validateLongitude } from '@api/tby/common/common'

interface FormParamProps {
  marginTop: string
}

const props = withDefaults(defineProps<FormParamProps>(), {
  marginTop: '0px'
})

const proTableRef = ref<ProTableInstance>()

// 表格列
const columns = reactive<ColumnProps<EducationStele.Record>[]>([
  { prop: 'name', label: '名称', align: 'center', minWidth: 200 },
  { prop: 'longitude', label: '经度', align: 'center', minWidth: 200 },
  { prop: 'latitude', label: '纬度', align: 'center', minWidth: 200 },
  { prop: 'operation', label: '操作', fixed: 'right', width: 180 }
])

const loadTable = (query: EducationStele.Query) => {
  return pageEducationStele(query)
}

function refresh() {
  proTableRef.value?.getTableList()
}

// 添加
const onAddClicked = () => {
  open(FormType.ADD)
}

// 修改
const onEditClicked = (row: any) => {
  open(FormType.EDIT, row.id)
}

// 删除
const onDeleteClicked = (row: any) => {
  ElMessageBox.confirm('是否删除数据?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    removeEducationStele(row.id).then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功!'
      })
      proTableRef.value?.getTableList()
    })
  })
}

const labelWidth = 100
const opened = ref(false)
const loading = ref(true)
const formType = ref<FormType>()
const formRef = ref<FormInstance>()
const form = ref<Partial<EducationStele.Form>>({})

// 是否新增
const isAdd = computed(() => {
  return formType.value === FormType.ADD
})

const rules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' },
    { max: 20, message: '名称最大20个字符', trigger: 'blur' }
  ],
  longitude: [
    { required: true, message: '请输入经度', trigger: 'blur' },
    { max: 32, message: '经度最大32个字符', trigger: 'blur' },
    { validator: validateLongitude, trigger: 'blur' }
  ],
  latitude: [
    { required: true, message: '请输入纬度', trigger: 'blur' },
    { max: 32, message: '纬度最大32个字符', trigger: 'blur' },
    { validator: validateLatitude, trigger: 'blur' }
  ]
})

const open = async (type: FormType, id?: number) => {
  form.value = {}
  formType.value = type
  opened.value = true
  if (isAdd.value) {
    loading.value = false
  } else {
    try {
      const { data } = await getEducationSteleDetail(id!)
      loading.value = false
      form.value = data
    } finally {
      loading.value = false
    }
  }
  formRef.value?.clearValidate()
}

const onSaveClicked = () => {
  if (!formRef.value) {
    return
  }
  formRef.value?.validate(valid => {
    if (!valid) {
      return
    }
    const formData = { ...unref(form) }
    saveOrUpdateEducationStele(formData).then(() => {
      ElMessage({
        type: 'success',
        message: '保存成功!'
      })
      refresh()
      close()
    })
  })
}

const onCancelClicked = () => {
  close()
}

function close() {
  loading.value = true
  opened.value = false
  form.value = {}
}
</script>

<style scoped lang="scss">
.card-header {
  height: 25px;
  line-height: 25px;
  .left {
    float: left;
    .icon {
      width: 5px;
      background-color: #104cf0;
      float: left;
    }
    .title {
      float: left;
      margin-left: 5px;
      font-weight: bold;
    }
  }
  .right {
    float: right;
  }
}
.mo-input--number {
  border: 1px solid #dcdfe6;
  display: flex;
  border-radius: 4px;
  .el-input-number--mini {
    flex: 1;
  }
  ::v-deep .el-input__inner {
    border: none !important;
  }
}
.define-append {
  width: 40px;
  display: inline-block;
  background: #f5f7fa;
  padding: 0px 3px;
  border-left: none;
  height: 32px;
  line-height: 32px;
  color: #909399;
  font-size: 12px;
  text-align: center;
}
</style>
